<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI做题伙伴</title>
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            /* 设置页面字体为Open Sans */
            display: flex;
            /* 将body设置为flex布局 */
            flex-direction: column;
            /* 子元素按垂直方向排列 */
            justify-content: center;
            /* 子元素沿主轴（垂直方向）居中 */
            align-items: center;
            /* 子元素沿交叉轴（水平方向）居中 */
            min-height: 100vh;
            /* 设置body高度至少为视窗高度，确保内容始终居中 */
            margin: 0;
            /* 清除body的默认外边距 */
            background-color: #f2f2f2;
            /* 添加浅灰色背景，便于观察居中效果 */
        }

        h2 {
            font-size: 40px;
            font-weight: 600;
            line-height: 1.2;
            color: #333;
            /* 使用深灰色文字 */
            text-transform: uppercase;
            /* 将标题文字转为大写 */
            letter-spacing: 0.05em;
            /* 添加轻微字母间距 */
            margin: 20px;
            /* 清除默认的顶部和底部外边距 */
        }
    </style>
</head>

<body>
<div>
    <h2 th:text="${topic}"></h2>
</div>


<button>AI解答</button>
<a href="/topic/next">下一题</a>

</body>
</html>